<script type="text/javascript" src="${pageContext.request.contextPath}/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<style>
	span.emotion { width: 42px; height: 20px; padding-left: 7px; cursor: pointer }
	span.emotion:hover { background-position: 2px -28px }
	.emoji{
		float: left;
		padding-top: 10px;
	}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/qqFace/js/jquery.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/static/qqFace/js/jquery.qqFace.js"></script>
<script type="text/javascript">

	$(function(){
	
		$('.emotion').qqFace({
			id : 'facebox', 
			assign:'content', 
			path:'${pageContext.request.contextPath}/static/qqFace/arclist/'	//表情存放的路径
		});
	
		show_em();
		
	});

	function show_em(){
		$(".commentDatas").find(".comment").each(function(){
			var str = $(this).find(".content").text();
			$(this).find(".content").html(replace_em(str));
		}); 
	}
	
	function replace_em(str){
		str = str.replace(/\</g,'&lt;');
		str = str.replace(/\>/g,'&gt;');
		str = str.replace(/\n/g,'<br/>');
		str = str.replace(/\[em_([0-9]*)\]/g,'<img src="${pageContext.request.contextPath}/static/qqFace/arclist/$1.gif" border="0" />');
		return str;

	}
	
	function loadimage(){
		document.getElementById("randImage").src="${pageContext.request.contextPath}/image.jsp?"+Math.random();
	}
	
	function submitData(){
		var nickName = $("#nickName").val();
		var content=$("#content").val();
		var email = $('#email').val();
		var imageCode=$("#imageCode").val();
		if(email ==null || email == ''){
			
		}else{
			if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email)){
				confirm("您输入的email格式不正确！");
			}
		}
		if(nickName==null || nickName==''){
			alert("请输入您的昵称！");
		}else if(content==null || content==''){
			alert("请输入留言内容！");
		}else if(imageCode==null || imageCode==''){
			alert("请填写验证码！");
		}else{
			$.post("${pageContext.request.contextPath}/message/save.do",{'content':content,'nickName':nickName,'email':email,'imageCode':imageCode,'blog.id':'${blog.id}'},function(result){
				if(result.success){
					window.location.reload();
					alert("谢谢您的留言！");
				}else{
					alert(result.errorInfo);
				}
			},"json");
		}
	}
	
	function productBackgroundColor(){
        //用rgb格式生成随机的颜色，rgb每一项的数字都是0到255,因此每一项的长度为256
        //Math.random 生成0到1之间的随机数，与256相乘则会得到0到256之间的随机数
        //再用Math.floor向下取整之后，则得到的是0到255的随机整数，则rgb(r,g,b)可以实现颜色的随机性
            var r = Math.floor( Math.random()*256);
            var b = Math.floor( Math.random()*256);
            var g = Math.floor( Math.random()*256);
            return "rgb("+r+","+g+","+b+")";
     }
	
	$(function(){
		
		setHeadphoto();
		
		getLocation();	
	});
	
	function setHeadphoto(){
		for(var i=0; i<$(".commentDatas").find(".headphoto").length;i++){
			$(".commentDatas").find(".headphoto").eq(i).css("background-color",productBackgroundColor());
			var headphotoWord = $(".commentDatas").find(".comment").find(".nickName").eq(i).text().charAt(0);
			if(/^[0-9a-zA-Z]$/.test(headphotoWord)){
				headphotoWord = $(".commentDatas").find(".comment").find(".nickName").eq(i).text().substring(0,2);
			}
			$(".commentDatas").find(".headphoto").eq(i).text(headphotoWord);
		}
	}
	
	function getLocation(){
		for(var i=0; i<$(".commentDatas").find(".locationIP").length;i++){
			var ip = $(".commentDatas").find(".locationIP").eq(i).val();
			/*根据ip获取所在地的api接口，新浪接口*/
			$.ajaxSettings.async = false;
			$.get('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip='+ip,function(_result){  
				if (remote_ip_info.ret == '1'){
					if(remote_ip_info.province !== remote_ip_info.city){
						$(".commentDatas").find(".location").eq(i).html("&nbsp;&nbsp;&nbsp;["+remote_ip_info.province+"省"+remote_ip_info.city+"市网友]");   
					}else{
						$(".commentDatas").find(".location").eq(i).html("&nbsp;&nbsp;&nbsp;["+remote_ip_info.province+"市网友]");
					}
				} else {   
					$(".commentDatas").find(".location").eq(i).html();
				}
			});
			$.ajaxSettings.async = true;
		}
	}
</script>

<div class="data_list">
	<div class="data_list_title">
		<img src="${pageContext.request.contextPath}/static/images/comment_icon.png"/>
		留言信息    <span style="color: #333;font-weight: normal;font-family: '微软雅黑' ">（已有 <span style="color: #E3171B;font-style: italic;">${totalMessage }</span> 条留言）</span>
		<span style="float: right;margin-right: 15px;"><a href="#messageBox" class="btn btn-info" style="font-size: 13px;color: #fff;width: 70px;height: 30px;">去留言</a></span>
	</div>
	<div class="commentDatas">
		<c:choose>
			<c:when test="${messageList.size()==0}">
				暂无留言
			</c:when>
			<c:otherwise>
				<c:forEach var="message" items="${messageList }" varStatus="status">
					<c:choose>
						<c:when test="${status.index==0 }">
							<div class="headphoto" style="margin-top: 10px;"></div>
							<input type="hidden" class="locationIP" name="locationIP" value="${message.userIp }"/>
							<div class="comment">
								<p><font class="nickName">${message.nickName }</font><span class="datetime location"></span>&nbsp;&nbsp;&nbsp;<span class="datetime"><fmt:formatDate value="${message.messageDate }" type="date" pattern="yyyy-MM-dd HH:mm"/></span>&nbsp;&nbsp;&nbsp;<span class="datetime" id="reply">回复暂不支持</span></p>
								<span class="content">${message.content }</span>
							</div>
						</c:when>
						<c:otherwise>
							<div class="headphoto"></div>
							<input type="hidden" class="locationIP" name="locationIP" value="${message.userIp }"/>
							<div class="comment">
								<p><font class="nickName">${message.nickName }</font><span class="datetime location"></span>&nbsp;&nbsp;&nbsp;<span class="datetime"><fmt:formatDate value="${message.messageDate }" type="date" pattern="yyyy-MM-dd HH:mm"/></span>&nbsp;&nbsp;&nbsp;<span class="datetime" id="reply">回复暂不支持</span></p>
								<span class="content">${message.content }</span>
							</div>
						</c:otherwise>
					</c:choose>
					<!-- 回复的样式代码，暂时先不弄回复功能 -->
					<%-- <div class="publish_comment" style="border:0;">
						<div class="reviewer"> 
							如何称呼您：<input type="text" value="" name="nickName"  id="nickName" size="10" placeholder="名称必填..."/>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							您的邮箱：<input type="text" value="" name="email"  id="email" size="10" placeholder="您的邮箱..."/>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							验证码：<input type="text" value="${imageCode }" name="imageCode"  id="imageCode" size="5" placeholder="四位数..."/>&nbsp;<img onclick="javascript:loadimage();"  title="点击换一个" name="randImage" id="randImage" src="${pageContext.request.contextPath}/image.jsp" width="60" height="20" border="1" align="absmiddle"> 
						</div>
						<div class="comment_area">
							<textarea rows="3" id="content" name="content" placeholder="喜欢就留个言呗...（文明留言，您的鼓励是我前进的动力！）"></textarea>
						</div>
						<div class="publishButton">
							<button class="btn btn-primary" type="button" onclick="submitData()">给他留言</button>
						</div>
					</div> --%>								
				</c:forEach>
			</c:otherwise>
		</c:choose>
	</div>
	<div>
		<nav style="text-align: center;">
			<ul class="pagination pagination-sm">
				${pageCode }
			</ul>
		</nav>
	</div>
</div>

<div class="data_list" id="messageBox">
	<div class="data_list_title">
		<img src="${pageContext.request.contextPath}/static/images/publish_comment_icon.png"/>
		给他留言
	</div>
	<div class="publish_comment">
			<div class="reviewer">
				如何称呼您：<input type="text" value="" name="nickName"  id="nickName" size="10" placeholder="名称必填..."/>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				您的邮箱：<input type="text" value="" name="email"  id="email" size="10" placeholder="您的邮箱..."/>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				验证码：<input type="text" value="${imageCode }" name="imageCode"  id="imageCode" size="5" placeholder="四位数..."/>&nbsp;<img onclick="javascript:loadimage();"  title="点击换一个" name="randImage" id="randImage" src="${pageContext.request.contextPath}/image.jsp" width="60" height="20" border="1" align="absmiddle"> 
			</div>
			
			<div class="comment_area">
				<textarea rows="3" id="content" name="content" placeholder="喜欢就留个言呗...（文明留言，您的鼓励是我前进的动力！）"></textarea>
			</div>
			<div class="emoji">
				<span class="emotion"> <img alt="表情" title="表情" src="${pageContext.request.contextPath}/static/images/happy_face.png"> </span>
			</div>
			<div class="publishButton">
				<button class="btn btn-primary" type="button" onclick="submitData()">给他留言</button>
			</div>
	</div>
</div>